<!--这个Card.vue单独在首页里使用，暂时放在home中，看情况移去common公共端-->
<template>
  <div class="title">
    <!--     <span>火爆推荐</span> -->
    <!-- 改为插槽 -->
    <slot>
      <span>火爆推荐</span>
    </slot>
  </div>
</template>

<script>
/* export default {}; */
</script>

<style scoped>
.title {
  padding: 20px auto;
  /* 栏目名称  h1*/
  text-align: center;
  color: rgb(231, 117, 41);
  background-color: antiquewhite;
  border-radius: 15% / 15%;
  /*   font-size: 20px; */
  /*标题 */
  width: 100%;
  text-align: center;
}
.title span {
  position: relative;
}
.title span::after {
  content: ""; /*  content: "888"*/
  display: block;
  position: absolute;
  right: -10px;
  top: 50%; /** */
  margin-top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /*   background-color: antiquewhite; */
  background-color: red;
}
.title span::before {
  /* 又坑我，这里：：忘记是跟着了的 */
  content: ""; /*  content: "888"*/
  position: absolute; /* absolute 和 absoute */
  display: block;
  left: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* 	margin-top: -4px; */
  margin-top: 12px;
  display: block;
  background-color: black;
}
</style>